<!DOCTYPE html>
<canvas id="canvas" width="200" height="200"></canvas>
<svg height="0">
  <filter id="filter">
    <feFlood fill-color="lime"/>
    <feDisplacementMap in2="SourceGraphic" xChannelSelector="R" yChannelSelector="G" scale="100"/>
  </filter>
</svg>

<script>
if (window.testRunner)
    testRunner.waitUntilDone();
// Passes if the output is a black square.
var img = new Image();
// Use a cross-origin URL.
img.src = "http://localhost:8000/resources/square.png";
img.onload = function () {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.filter = "url(#filter)";
  // Fill rect will force resolving of the filter before drawImage.
  ctx.fillRect(-10, -10, 1, 1);
  ctx.drawImage(img, 0, 0);
  testRunner.notifyDone();
}
</script>
